The Mouse Leave
event can be handled by adding an event handler to the mouseleave() event using jQuery as follows. The event fires when the mouse leaves
the target region or Object.
$("#TargetObject").mouseleave(function(event) {
// Add code here
to handle the Event
});
The below example shows on how to Handle the Mouse event in a DIV
The below example shows on how to Handle the Mouse event in a DIV
Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mouse
Events</title>
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
src="JavaScript/jquery-1.7.2.js"></script>
<script language="javascript"
type="text/javascript">
type="text/javascript">
$(document).ready(function() {
//
// Mouse
Leave Event
$("#divMouseMove").mouseleave(function(event) {
$("#spanMouseMove").text('Mouse Leave Event');
});
});
</script>
</head>
<body>
<form id="frmMouseEvents" runat="server">
<table cellpadding="2" cellspacing="2" border="1">
<tr valign="top">
<td align="center">
<div id="divMouseMove"
style="width:100px;
height:75px;
background-color:#FCF4EB;
border:1px double #E3B999;">
</div>
</td>
<td align="center">
<span
id="spanMouseMove"
style=" font-family:Verdana;
font-size:12px; color:Maroon;">
Hover to Check Enter &
Leave Events
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Post
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
No comments:
Post a Comment